<template>
  <div class="view-container">

    <!--<el-alert class="view－alert"
              :title="alertText"
              type="warning"
              show-icon>
    </el-alert>-->

    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane v-for="tab in tabs" :key="tab.name" :name="tab.name">
        <span slot="label">
          {{tab.label}}
          <el-badge class="mark" :value="tab.num" :max="99" :hidden="tab.num<=0"/>
        </span>
      </el-tab-pane>
    </el-tabs>

    <div class="">
      <keep-alive>
        <component :is="activeName">
        </component>
      </keep-alive>
    </div>

  </div>
</template>

<script>
  import {getTab,setTab} from '@/utils/order';
  import returnExpire from './return_expire.vue';
  import returnIng from './return_ing.vue';
  import returnOverdue from './return_overdue.vue';
  import returned from './return_ed.vue';
  import returnRefundDeposit from './return_refund_deposit.vue';
  import returnPendingBuyout from './return_pending_buyout.vue';
  import returnPendingCompensate from './return_pending_compensate.vue';
  import returnCompensateOverdue from './return_compensate_overdue.vue';

  export default {
    name: 'orderReturn',
    components: {
      'return-expire': returnExpire,
      'return-ing': returnIng,
      'return-overdue': returnOverdue,
      'return-ed': returned,
      'return-pending-buyout': returnPendingBuyout,
      'return-refund-deposit': returnRefundDeposit,
      'return-pending-compensate':returnPendingCompensate,
      'return-compensate-overdue':returnCompensateOverdue,
    },
    data()
    {
      return {
        activeName: 'return-expire', //当前激活的标签,以及视图
        tabs: [
          {label: '到期待还', name: 'return-expire', num: 0},
          {label: '退还中', name: 'return-ing', num: 0},
          {label: '退还逾期', name: 'return-overdue', num: 0},
          {label: '已退还', name: 'return-ed', num: 0},
          {label: '退还押金中', name: 'return-refund-deposit', num: 0},
          {label: '待赔偿', name: 'return-pending-compensate', num: 0},
          {label: '赔偿逾期', name: 'return-compensate-overdue', num: 0},

          /* {label: '待买断', name: 'return-pending-buyout', num: 0},*/
        ], //标签页数组
      }
    },
    computed: {
      alertText()
      {
        return '您有 12 个已退还订单需要处理';
      }
    },
    mounted(){
      let activetab = getTab();
      if(this.tabs.some((tab)=>{return activetab === tab.name}))
      {
        this.activeName = activetab;
      }
    },
    methods: {
      handleClick(tab,event)
      {
        setTab(tab.name);
      }
    }
  }
</script>
